<template>
  <div>
    <!-- 轮播图 -->
    <swiper previous-margin="" autoplay="true" indicator-dots="true" indicator-color="white" indicator-active-color="#457bf0">
      <swiper-item>
        <image src="./images/banner1.png"></image>
      </swiper-item>
      <swiper-item>
        <image src="./images/banner2.jpg"></image>
      </swiper-item>
    </swiper>
    <!-- 菜单选项 -->
    <div class="nav-meuns">
      <ul>
        <li v-for="(item,index) in itemMeunList" :key="index" @click="goto(index)"><image :src='item'></image></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      itemMeunList:[
        './images/index-item1.png',
        './images/index-item2.png',
        './images/index-item3.png',
        './images/index-item4.png',
        './images/index-item5.png',
        './images/index-item6.png'
        ]
    };
  },
  methods: {
    goto(index){
      if(index===0){
        wx.navigateTo({
        url:'/pages/usingHelp/main'
         })
         return
      }
      else if(index===1){
        wx.navigateTo({
        url:'/pages/connectHelp/main'
         })
         return
      }
       else if(index===2){
        wx.navigateTo({
        url:'/pages/productDes/main'
         })
         return
      }
       else if(index===3){
        wx.navigateTo({
        url:'/pages/mainTain/main'
         })
         return
      }
       else if(index===4){
        wx.navigateTo({
        url:'/pages/commonSym/main'
         })
         return
      }
       else{
        wx.navigateTo({
        url:'/pages/moreQue/main'
         })
         return
      }
    }
  },
};
</script>

<style lang="scss" scoped>
  swiper{
    height: 420rpx;
    swiper-item{
      display: flex;
      justify-content: center;
      align-items: center;
      image{
        width:680rpx;
        height: 370rpx;
        border-radius: 20rpx;
        box-shadow: 1px 1px 10px #888888;
          }
        }
      }
    .nav-meuns{
      ul{
        display: flex;
        flex-flow: wrap;
        margin-top: 60rpx;
        li{
           width: 33.33%;
           display: flex;
           justify-content: center;
           margin-bottom: 60rpx;
           image{
             width: 160rpx;
             height: 160rpx;
           }
        }
      }
    }
</style>

